<template>
	<view class="page_wrapper">
		<block v-if="mathExamLogs.length === 0">
			<view class="nodata_block">
				<image class="nodata" src="@/static/images/nodata.png" mode="aspectFit"></image>
				<button class="green_btn start_exam_btn" @click="startExam()">马上练习</button>
			</view>
		</block>
		<block>
			<view class="page_sub_wrapper">
				<view v-for="(mathExam, index) in mathExamLogs" class="math_exam_block" @click="showLog(mathExam)">
					<view class="exam_left_block">
						<view class="exam_title">{{mathExam.title}}</view>
						<view class="exam_status_block">
							状态: 
							<block v-if="mathExam.status === 'undo'"><view class="status undo">{{mathExam.statusCn}}</view></block>
							<block v-else><view class="status did">{{mathExam.statusCn}}</view></block>
						</view>
					</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/images/right_arrow.png"></image>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				query: {
					pageNo: 1,
					pageSize: 20
				},
				mathExamLogs: []
			}
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/mathExams/my', 
					this.query
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.mathExamLogs = res.items
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			startExam() {
				uni.navigateTo({
					url: '/pages/mathExam/mathExam'
				})
			},
			showLog(data) {
				uni.navigateTo({
					url: '/pages/mathExamLogs/mathExamLog/mathExamLog?examId=' + data.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.nodata_block{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.nodata{
				width: 200px;
			}
			.start_exam_btn{
				width: 150px;
				margin-bottom: 200px;
			}
		}
		.page_sub_wrapper{
			padding: 0px 15px 15px 15px; 
			display: flex;
			flex-direction: column;
			.math_exam_block{
				min-height: 70px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #e2e2e2;
				.exam_left_block{
					flex: 1;
					.exam_title{
						font-size: 17px;
						font-weight: 500;
						margin-bottom: 3px;
					}
					.exam_status_block{
						display: flex;
						font-size: 14px;
						color: #666666;
						.undo{
							color: red;
						}
						.status{
							margin-left: 20px;
						}
					}
				}
				.icon_block{
					width: 18px;
					display: flex;
					justify-content: center;
					align-items: center;
					.right_icon{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
	}
</style>
